<template>
	<view class="page">
		<view class="banner-container">
			<image src="@/static/image/banner.jpeg" mode="aspectFill" class="banner" />
		</view>
		<view class="nav-container">
			<view class="nav-item" v-for="(item, index) in tabList" :key="index" @click="goPlaceList">
				<image :src="item.url" mode=""></image>
				<text class="text">{{ item.name }}</text>
			</view>
		</view>
		<view class="help-container">
			<view class="help-item" @click="infoShare()">
				<text class="help-tit">车位资源上传</text>
				<image src="@/static/image/uniui-header-bg.png" mode="aspectFill" class="help-image" />
			</view>
			<view class="help-item" @click="helpInfo()">
				<text class="help-tit">车位求助信息</text>
				<image src="@/static/image/uniui-header-bg.png" mode="aspectFill" class="help-image" />
			</view>
		</view>
		<view class="destination-container">
			<view v-for="(item,k) in parkInfoData" :key="item.id" class="destination-item"
				@click="previewDetail(item,k)">
				<image v-if="item.tps.length" :src="item.tps[0].url" class="logo" />
				<view v-else class="logo">暂无图片</view>
				<view class="content">
					<!-- <view class="no-permissions" v-if="(k > 2)&&permissions"
						:style="{'background-image': (k > 2)&&permissions ? `url(${noPremission})` : ''}">
						<image src="@/static/no-permiss.png" mode="aspectFill"></image>
					</view> -->
					<view class="tit">{{ (k > 2)&&permissions ? '不支持查看该停车名' : item.title }}</view>
					<view class="tag-box">
						<view v-for="tag in tagList(item)" :key="tag" class="tag-item">
							{{ tag }}
						</view>
					</view>
					<view class="bottom-box">
						<view class="price">
							{{ '¥' + (item.prices || item.provisionaPrice) }}
						</view>
						<view>{{ item.distanceInKm + 'km' }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <uni-popup
      :show="type === 'showpopup'"
      mode="fixed"
      @hidePopup="togglePopup('')">
      <view class="popup-view">
        <text class="popup-title">需要用户授权位置权限</text>
        <view class="uni-flex popup-buttons">
          <button
            class="uni-flex-item"
            type="primary"
            open-type="openSetting"
            @tap="openSetting">
            设置
          </button>
          <button class="uni-flex-item" @tap="togglePopup('')">取消</button>
        </view>
      </view>
    </uni-popup> -->
	</view>
</template>

<script>
	import {
		parkInfoList
	} from '@/api/parkInfo';
	import {
		wxLogin,
		wxUserInfo
	} from '@/api/weixin.js'
	export default {
		data() {
			return {
				hasLocation: false,
				location: {
					longitude: 0,
					latitude: 0,
				},
				type: '',
				noPremission: require('../../static/no-permiss.png'),
				tabList: [{
						name: '找车位',
						url: require('../../static/icons/card.png'),
					},
					{
						name: '充电桩',
						url: require('../../static/icons/card.png'),
					},
					{
						name: '医院',
						url: require('../../static/icons/card.png'),
					},
					{
						name: '机场',
						url: require('../../static/icons/card.png'),
					},
					{
						name: '港口',
						url: require('../../static/icons/card.png'),
					},
					{
						name: '景区',
						url: require('../../static/icons/card.png'),
					},
					{
						name: '火车站',
						url: require('../../static/icons/card.png'),
					},
					{
						name: '地铁',
						url: require('../../static/icons/card.png'),
					},
				],
				queryParams: {
					page: 1,
					limit: 10,
				},
				parkInfoData: [],
				permissions: false,
			};
		},
		onShow() {
			this.getLoginUserInfo()
		},
		methods: {
			tagList(item) {
				const list = item.sfmsText.split(',').concat(item.tclxText.split(','));
				return list;
			},
			queryParkInfoList() {
				uni.showLoading({
					title: '加载中',
				});
				const data = {
					...this.queryParams,
					currentZb: `${this.location.longitude},${this.location.latitude}`,
				};
				parkInfoList(data).then((res) => {
					this.parkInfoData = this.parkInfoData.concat(res.data.list);
				})
			},
			goPlaceList() {
				if (this.permissions) {
					uni.showToast({
						title: '暂无权限查看',
						icon: 'error'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/placeList/index',
				});
			},
			previewDetail(info, k) {
				if (this.permissions && k > 4) {
					uni.showToast({
						title: '暂无权限查看',
						icon: 'error'
					})
					return
				}
				uni.setStorage({
					key: 'parkInfoDetail',
					data: info,
				});
				console.log('info', info)
				uni.navigateTo({
					url: '/pages/placeDetail/index',
				});
			},

			getLoginUserInfo() {
				uni.login({
					provider: 'weixin',
					success: async (codeRes) => {
						console.log(" 登录请求code: ", codeRes.code);
						const loginRes = await wxLogin({
							code: codeRes.code
						});
						uni.setStorageSync('token', loginRes.token);
						console.log("登录成功 loginRes: ", loginRes);

						const infoParams = {
							sessionKey: loginRes.data.sessionKey,
						};
						const response = await wxUserInfo(infoParams);
						console.log("个人信息--response.data: ", response.data);
						if (!response.data.identity) {
							this.permissions = true
						}
					},
				});
			},

			// 求助信息
			helpInfo() {
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				})
				return
				console.log('9527: ', 9527);
				uni.navigateTo({
					url: '/pages/subPack/help-info/help-info',
				});
			},
			// 资源分享
			infoShare() {
				console.log('9527: ', 9527);
				uni.navigateTo({
					url: '/pages/subPack/info-share/info-share',
				});
			},
			doGetLocation() {
				uni.getLocation({
					success: (res) => {
						this.hasLocation = true;
						this.location = {
							longitude: res.longitude,
							latitude: res.latitude,
						};
						// 存储位置信息
						uni.setStorage({
							key: 'location',
							data: this.location,
						});
						this.queryParkInfoList();
					},
					fail: (err) => {
						console.log(err);
						// #ifdef MP-BAIDU
						if (err.errCode === 202 || err.errCode === 10003) {
							// 202模拟器 10003真机 user deny
							this.showConfirm();
						}
						// #endif
						// #ifndef MP-BAIDU
						if (err.errMsg.indexOf('auth deny') >= 0) {
							uni.showToast({
								title: '访问位置被拒绝',
							});
						} else {
							uni.showToast({
								title: err.errMsg,
							});
						}
						// #endif
					},
				});
			},
			async getLocation() {
				const status = await this.getSetting();
				if (status === 2) {
					this.showConfirm();
					return;
				}
				this.doGetLocation();
			},
			getSetting: function() {
				return new Promise((resolve, reject) => {
					uni.getSetting({
						success: (res) => {
							if (res.authSetting['scope.userLocation'] === undefined) {
								resolve(0);
								return;
							}
							if (res.authSetting['scope.userLocation']) {
								resolve(1);
							} else {
								resolve(2);
							}
						},
					});
				});
			},
			togglePopup(type) {
				this.type = type;
			},
			openSetting: function() {
				this.hideConfirm();
				uni.openSetting({
					success: (res) => {
						if (res.authSetting && res.authSetting['scope.userLocation']) {
							this.doGetLocation();
						}
					},
					fail: (err) => {},
				});
			},
		},
		mounted() {
			this.getLocation();
		},
		onReachBottom() {
			this.queryParams.page++;
			this.queryParkInfoList();
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		padding: 0 16rpx;

		.banner-container {
			margin-top: 16rpx;
			height: 240rpx;
			border-radius: 16rpx;
			background: white;

			.banner {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}
		}

		.nav-container {
			display: flex;
			flex-wrap: wrap;
			margin-top: 16rpx;
			background: white;
			border-radius: 16rpx;

			.nav-item {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 16rpx 0;

				>image {
					width: 25px;
					height: 25px;
				}

				.icon {
					font-size: 40px;
				}

				.text {
					font-size: 12px;
				}
			}
		}

		.help-container {
			display: flex;
			justify-content: space-between;
			margin-top: 16rpx;
			border-radius: 16rpx;

			.help-item {
				width: calc(50% - 8rpx);
				height: 120px;
				display: flex;
				flex-direction: column;
				background: white;
				border-radius: 16rpx;
				overflow: hidden;

				.help-tit {
					text-indent: 16rpx;
					font-weight: bold;
				}

				.help-image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.destination-container {
			margin-top: 16rpx;

			.destination-item {
				padding: 16rpx;
				background: white;
				border-radius: 10rpx;
				display: flex;
				flex-direction: row;
				margin-bottom: 10rpx;
				position: relative;


				.logo {
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.content {
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;

					.tit {
						font-weight: 700;
					}

					.tag-box {
						display: flex;
						margin: 10rpx 0;

						.tag-item {
							padding: 4rpx 16rpx;
							border-radius: 8rpx;
							color: white;
							font-size: 12px;
							background: #18bc37;
							margin-right: 8rpx;
						}
					}

					.bottom-box {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
					}

					.no-permissions {
						position: absolute;
						z-index: 11;
						height: 128rpx;
						background: #999;
						background-repeat: no-repeat;
						background-size: cover;
						width: 100%;
						>image{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
</style>
